<template>
  <div>
    <Card>
      <Row>
        <Form ref="searchForm" :model="searchForm" inline :label-width="70">
          <FormItem label="公司名称" prop="goodNo">
            <Input
              type="text"
              v-model="searchForm.goodNo"
              placeholder="请输入公司名称"
              clearable
              style="width: 200px"
            />
          </FormItem>

          <FormItem label="货物类型" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.mobile"
              placeholder="请输入货物类型"
              clearable
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="货源编号" prop="mobile">
            <Input
              type="text"
              v-model="searchForm.goodSubType"
              placeholder="请输入货源编号"
              clearable
              style="width: 200px"
            />
          </FormItem>

          <FormItem label="装货地址">
            <Cascader
              transfer
              style="width: 200px"
              v-model="searchForm.LoadingAddress"
              :data="LoadingAddresslist"
              :load-data="LoadingProvinceloadData"
              @on-change="getStartArea"
              clearable
            ></Cascader>
          </FormItem>
          <FormItem label="卸货地址">
            <Cascader
              transfer
              style="width: 200px"
              v-model="searchForm.UnloadingAddress"
              :data="UnloadingAddresslist"
              :load-data="ProvinceloadData"
              @on-change="changeUnloading"
              clearable
            ></Cascader>
          </FormItem>
          <FormItem label="创建时间">
            <DatePicker
              clearable
              transfer
              type="daterange"
              placement="bottom-end"
              placeholder="请选择日期"
              style="width: 200px"
              v-model="date"
              @on-change="changeDate"
            ></DatePicker>
          </FormItem>
          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
            <Button @click="getDataList" icon="md-refresh">刷新</Button>
          </FormItem>
        </Form>
      </Row>
      <Row>
        <Table
          :loading="loading"
          border
          :columns="columns"
          :data="data"
          ref="table"
        >
          <template slot-scope="{ row }" slot="action">
            <div style="display: flex">
              <div>
                <span
                  style="color: #2d8cf0; cursor: pointer"
                  @click="SourceDetails(row)"
                  >审核
                </span>
              </div>
              <div>
                <Dropdown transfer trigger="click" style="margin-left: 20px">
                  <a href="javascript:void(0)" style="display: inline-block">
                    更多
                    <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem @click.native="operationRecordClick(row)"
                      >操作记录</DropdownItem
                    >
                  </DropdownMenu>
                </Dropdown>
              </div>
            </div>
          </template>
        </Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!-- 货主详情 -->
    <operationRecord
      @operationRecordEnd="operationRecordEnd"
      :operationRecordData="operationRecordData"
      :operationRecordModal="this.operationRecordModal"
    >
    </operationRecord>
  </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
import { getCompanyInfoByUserIds } from "@/api/order";
import {
  getPcDriverGoodInfoByPage,
  getProvinceData,
  getAreaCityList,
} from "@/api/index";
import { getStore } from "@/libs/storage";
export default {
  name: "goodsVo",
  components: {
    addModal,
  },
  data() {
    return {
      erweimadata: { cargoOwnerInfoVo: {} },
      erweima: false,
      UnloadingAddresslist: [], //卸省份数据
      LoadingAddresslist: [],
      loadingData: [], //装货省份数据
      DetaidAddress: true,
      companyList: [],
      modal: false,
      openSearch: true, // 显示搜索
      openTip: true, // 显示提示
      showType: "0", // 添加或编辑标识
      loading: true, // 表单加载状态
      date: [],

      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
        companyName: "", //公司名称
        mobile: "", //手机号
        status: "0", //货源状态
        goodNo: "", //货源编号
        beginAreaCode: "", //起始区域列表
        endAreaCode: "", //结束区域列表
        startDay: "", //开始时间
        endDay: "", //结束时间
        business: "1", //业务类型
        pricingMethod: "", //定价类型
        goodSubType: "", //货品名称
        UnloadingAddress: "", //回显卸货地址id
        LoadingAddress: "", //回显装货地址id,
      },
      selectList: [], // 多选数据
      form: {},
      columns: [
        {
          title: "#",
          type: "index",
          minWidth: 60,
        },

        {
          title: "货源编号",
          key: "goodNo",
          minWidth: 190,
        },
        {
          title: "公司名称",
          key: "extractName",
          minWidth: 190,
        },
        {
          title: "装货地址",
          minWidth: 270,
          sortable: false,
          render: (h, params) => {
            let text =
              params.row.beginProvinceName +
              params.row.beginCityName +
              params.row.beginAreaName +
              params.row.beginAddress;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: placTop, maxWidth: "270", transfer: true },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: params.column._width * 0.85 + "px",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                      marginTop: "9px",
                    },
                  },
                  text
                ),
                h(
                  "span",
                  {
                    slot: "content",
                    style: {
                      whiteSpace: "normal",
                      wordBreak: "break-all",
                      paddingRight: "5px",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },
        {
          title: "卸货地址",
          minWidth: 270,
          sortable: false,
          render: (h, params) => {
            let text =
              params.row.endProvinceName +
              params.row.endCityName +
              params.row.endAreaName +
              params.row.endAddress;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: placTop, maxWidth: "270", transfer: true },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: params.column._width * 0.85 + "px",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                      marginTop: "9px",
                    },
                  },
                  text
                ),
                h(
                  "span",
                  {
                    slot: "content",
                    style: {
                      whiteSpace: "normal",
                      wordBreak: "break-all",
                      paddingRight: "5px",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },

        {
          title: "货品名称",
          key: "goodSubType",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "货物类型",
          key: "goodSubType",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "运费价格",
          key: "freightUnitPrice",
          minWidth: 150,
          render: (h, params) => {
            return h("div", params.row.freightUnitPrice + " 元/吨");
          },
        },
        {
          title: "发布数量",
          key: "totalGoodWeight",
          minWidth: 150,
          render: (h, params) => {
            let text = "";
            text = params.row.totalGoodWeight + " 吨";
            return h("div", text);
          },
        },
        {
          title: "剩余数量",
          key: "goodWeight",
          minWidth: 150,
          render: (h, params) => {
            let text = "";
            text = params.row.goodWeight + " 吨";
            return h("div", text);
          },
        },

        {
          title: "运输要求",
          key: "content",
          minWidth: 120,
          render: (h, params) => {
            if (params.row.content == "" || params.row.content == null) {
              return h(
                "div",
                {
                  style: {
                    color: "#a9a9a9",
                  },
                },
                "未填写"
              );
            } else {
              let text = params.row.content;
              return h(
                "Tooltip",
                {
                  props: {
                    placement: "top",
                    maxWidth: "270",
                    content: text,
                    transfer: true,
                  },
                },
                [
                  h(
                    "span",
                    {
                      props: {
                        type: "primary",
                        size: "small",
                      },
                      style: {
                        display: "inline-block",
                        width: params.column._width * 0.75 + "px",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap",
                        marginTop: "9px",
                        marginRight: "10px",
                      },
                    },
                    text
                  ),
                ]
              );
            }
          },
        },

        // {
        //   title: "创建者",
        //   key: "createBy",
        //   width: 120,
        //   sortable: false,
        //   render: (h, params) => {
        //     let placTop = "top";
        //     if (params.index == 0) {
        //       placTop = "bottom";
        //     } else {
        //       placTop = "top";
        //     }
        //     return h(
        //       "Tooltip",
        //       {
        //         props: {
        //           maxWidth: "120",
        //           placement: placTop,
        //           content: params.row.createBy,
        //           transfer: true,
        //         },
        //       },
        //       [
        //         h(
        //           "Tag",
        //           {
        //             style: {
        //               "margin-right": "8px",
        //             },
        //             props: {
        //               type: "border",
        //             },
        //           },
        //           params.row.createName
        //         ),
        //       ]
        //     );
        //   },
        // },
        {
          title: "更新时间",
          key: "createTime",
          minWidth: 170,
          sortable: false,
        },
        {
          title: "创建时间",
          key: "createTime",
          minWidth: 170,
          sortable: false,
        },
        {
          title: "状态",
          key: "status",
          minWidth: 100,
          sortable: false,
          fixed: "right",
          render: (h, params) => {
            let statusColor = "";
            if (params.row.status == 0) {
              statusColor = "processing";
            } else if (params.row.status == 1) {
              statusColor = "error";
            } else if (params.row.status == 2) {
              statusColor = "default";
            } else if (params.row.status == 3) {
              statusColor = "success";
            } else if (params.row.status == 4) {
              statusColor = "default";
            } else if (params.row.status == 5) {
              statusColor = "default";
            } else if (params.row.status == -1) {
              statusColor = "default";
            } else if (params.row.status == 6) {
              statusColor = "default";
            }
            return h("div", [
              h("Badge", {
                props: {
                  status: statusColor,
                  text: this.$options.filters["SOURCE_STATUS"](
                    params.row.status
                  ),
                },
              }),
            ]);
          },
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 140,
          // render: (h, params) => {
          //   return h("div", [
          //     h(
          //       "a",
          //       {
          //         on: {
          //           click: () => {
          //             this.SourceDetails(params.row);
          //           },
          //         },
          //       },
          //       "审核"
          //     ),
          //   ]);
          // },
        },
      ],
      data: [], // 表单数据
      pageNumber: 1, // 当前页数
      pageSize: 10, // 页面大小
      total: 0, // 表单数据总数
      dictVehicleType: this.$store.state.dict.vehicleType,
      // / 操作记录
      operationRecordModal: false,
      operationRecordData: {},
    };
  },
  components: {
    operationRecord,
  },
  methods: {
    showPlatformInfoVo(row) {
      this.$Modal.info({
        title: "承运人信息：",
        content: `公司全称： ${row.companyName}
              <br>公司简称： ${row.abbreviation}
              <br>联系电话： ${row.companyPhone}
            `,
      });
    },
    // 操作记录点击
    operationRecordClick(row) {
      this.operationRecordModal = true;
      this.operationRecordData.logType = 5;
      this.operationRecordData.oid = row.goodId;
    },
    // 操作记录关闭
    operationRecordEnd(val) {
      this.operationRecordModal = val;
      this.operationRecordData = {};
    },
    init() {
      this.getDataList();
    },
    //  搜索时间
    changeDate(val) {
      //改变选择日期
      this.searchForm.startDay = val[0];
      this.searchForm.endDay = val[1];
    },
    // 点击装货地址隐藏字符串展示下拉框
    ClickLoadingAddress() {},
    // 获取卸货省份数据
    getProvinceDataList() {
      let fn = () => {
        getProvinceData().then((res) => {
          if (res.code == 200) {
            res.result.forEach(function (e) {
              e.level = 1;
              e.label = e.provinceName;
              e.pid = e.provinceCode;
              e.value = e.provinceCode;
              e.loading = false;
              e.children = [];
            });
            this.LoadingAddresslist = res.result;
            // this.loadingData = res.result;
          } else {
            this.$Message.error(res.message);
          }
        });
      };
      fn();
    },
    getProvinceDataList1() {
      let fn = () => {
        getProvinceData().then((res) => {
          if (res.code == 200) {
            res.result.forEach(function (e) {
              e.level = 1;
              e.label = e.provinceName;
              e.pid = e.provinceCode;
              e.value = e.provinceCode;
              e.loading = false;
              e.children = [];
            });
            this.UnloadingAddresslist = res.result;
            // this.loadingData = res.result;
          } else {
            this.$Message.error(res.message);
          }
        });
      };
      fn();
    },
    // 搜索卸货详细地址
    ProvinceloadData(item, callback) {
      item.loading = true;
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          item.children = res.result;
          callback();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //搜索装货详细地址
    LoadingProvinceloadData(item, callback) {
      this.$nextTick(() => {
        item.loading = true;
        getAreaCityList({ code: item.value, type: item.level }).then((res) => {
          item.loading = false;
          if (res.code == 200) {
            res.result.forEach(function (e) {
              if (e.level != 3) {
                e.level = e.level;
                e.label = e.label;
                e.pid = e.pid;
                e.value = e.value;
                e.loading = false;
                e.children = [];
              } else {
                e.value = e.value;
                e.label = e.label;
              }
            });
            item.children = res.result;
            callback();
          } else {
            this.$Message.error(res.message);
          }
        });
      });
    },

    // 选择装货地址
    getStartArea(value, selectedData) {
      if (selectedData.length == 3) {
        this.searchForm.beginAreaCode = value[2]; //搜索赋值
      }
    },
    // 选择卸货地址
    changeUnloading(value, selectedData) {
      if (selectedData.length == 3) {
        this.searchForm.endAreaCode = value[2]; //搜索赋值
      }
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.status = "0";
      this.searchForm.companyName = "";
      this.searchForm.mobile = "";
      this.searchForm.beginAreaCode = ""; //起始区域列表
      this.searchForm.endAreaCode = ""; //结束区域列表
      this.searchForm.startDay = ""; //开始时间
      this.searchForm.endDay = ""; //结束时间
      this.searchForm.goodSubType = ""; //货品名称
      this.searchForm.UnloadingAddress = ""; //回显卸货地址id
      this.searchForm.LoadingAddress = ""; //回显装货地址id
      this.searchForm.business = 1; //业务类型
      this.searchForm.pricingMethod = ""; //报价类型
      this.searchForm.goodNo = "";
      this.date = [];
      // 重新加载数据
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    changeSelect(e) {
      this.selectList = e;
    },
    getDataList() {
      if (this.searchForm.LoadingAddress.length == 0) {
        this.searchForm.beginAreaCode = "";
      }
      if (this.searchForm.UnloadingAddress.length == 0) {
        this.searchForm.endAreaCode = "";
      }
      this.loading = true;
      for (let item in this.searchForm) {
        if (!this.searchForm[item]) {
          delete this.searchForm[item];
        }
      }
      this.searchForm.status = 0;
      getPcDriverGoodInfoByPage(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.data = res.result.records;
          this.total = res.result.total;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },
    // 签署合同
    signContractClick(row) {
      let pdf = "";
      pdf =
        this.$baseUrl +
        "/freight/file/view/" +
        row.contractId +
        "?accessToken=" +
        this.accessToken +
        "&preview=true";
      window.open(pdf, "_blank");
    },

    // 货源详情
    SourceDetails(row) {
      this.searchForm.goodId = row.goodId;
      let key = JSON.stringify(this.searchForm);
      this.$router.push({
        name: "detailsModal",
        query: {
          key: key,
          modifys: 2,
        },
      });
    },
  },
  mounted() {
    if (this.$route.query.key) {
      this.searchForm = JSON.parse(this.$route.query.key);
      //  this.searchForm.status=0
      this.date = [];
      this.date.push(this.searchForm.startDay);
      this.date.push(this.searchForm.endDay);
    } else {
      this.searchForm.business = 1;
      // this.searchForm.status = -2;
    }
    this.init();
    this.getProvinceDataList();
    this.getProvinceDataList1();
  },
};
</script>
<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/table-common.less";
.page {
  margin-top: 2vh;
}
.search {
  .operation {
    margin-bottom: 2vh;
  }
  .select-count {
    font-weight: 600;
    color: #40a9ff;
  }
  .select-clear {
    margin-left: 10px;
  }

  .drop-down {
    margin-left: 5px;
  }
}
.Sedtre {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  left: 10px;
  z-index: 99999;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container {
  // border:solid 2px #dedede;
  padding: 10px;
  height: 350px;
}
p {
  text-align: left;
}
</style>